<template>
  <view class="record-detail">
    <view v-if="loading" class="loading">
      <text>加载中...</text>
    </view>
    
    <view v-else-if="record" class="detail-content">
      <!-- 支付状态 -->
      <view class="status-section">
        <view class="status-icon" :class="getStatusClass(record.paymentStatus)">
          <text class="iconfont" :class="getStatusIcon(record.paymentStatus)"></text>
        </view>
        <text class="status-text">{{ getStatusText(record.paymentStatus) }}</text>
        <text class="status-desc">{{ getStatusDesc(record.paymentStatus) }}</text>
      </view>
      
      <!-- 支付金额 -->
      <view class="amount-section">
        <text class="amount-label">支付金额</text>
        <view class="amount-value">
          <text class="currency">¥</text>
          <text class="price">{{ record.paymentAmount }}</text>
        </view>
      </view>
      
      <!-- 支付信息 -->
      <view class="info-section">
        <view class="info-item">
          <text class="label">订单号</text>
          <text class="value">{{ record.orderNo }}</text>
        </view>
        <view class="info-item">
          <text class="label">支付单号</text>
          <text class="value">{{ record.paymentNo }}</text>
        </view>
        <view class="info-item">
          <text class="label">支付方式</text>
          <text class="value">{{ record.paymentMethod === 'WXPAY' ? '微信支付' : record.paymentMethod }}</text>
        </view>
        <view class="info-item">
          <text class="label">创建时间</text>
          <text class="value">{{ formatTime(record.createTime) }}</text>
        </view>
        <view v-if="record.paymentTime" class="info-item">
          <text class="label">支付时间</text>
          <text class="value">{{ formatTime(record.paymentTime) }}</text>
        </view>
        <view v-if="record.transactionId" class="info-item">
          <text class="label">微信交易号</text>
          <text class="value">{{ record.transactionId }}</text>
        </view>
        <view v-if="record.failReason" class="info-item">
          <text class="label">失败原因</text>
          <text class="value error">{{ record.failReason }}</text>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="action-section">
        <button v-if="record.paymentStatus === 0" class="btn btn-primary" @click="retryPay">
          重新支付
        </button>
        <button v-if="record.paymentStatus === 1" class="btn btn-secondary" @click="applyRefund">
          申请退款
        </button>
        <button class="btn btn-default" @click="goToOrder">
          查看订单
        </button>
      </view>
    </view>
    
    <view v-else class="error">
      <text>支付记录不存在</text>
    </view>
  </view>
</template>

<script>
import { payService } from '@/services/pay.js'

export default {
  data() {
    return {
      paymentId: '',
      record: null,
      loading: true
    }
  },
  
  onLoad(options) {
    this.paymentId = options.paymentId
    this.loadDetail()
  },
  
  methods: {
    async loadDetail() {
      try {
        const res = await payService.getPaymentRecordDetail(this.paymentId)
        
        if (res.success) {
          this.record = res.data
        } else {
          uni.showToast({
            title: res.message || '获取支付记录失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取支付记录详情失败:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    getStatusClass(status) {
      const statusMap = {
        0: 'pending',
        1: 'success',
        2: 'failed',
        3: 'closed',
        4: 'refunded'
      }
      return statusMap[status] || 'unknown'
    },
    
    getStatusIcon(status) {
      const iconMap = {
        0: 'icon-clock',
        1: 'icon-check',
        2: 'icon-close',
        3: 'icon-close',
        4: 'icon-refund'
      }
      return iconMap[status] || 'icon-question'
    },
    
    getStatusText(status) {
      const statusMap = {
        0: '待支付',
        1: '支付成功',
        2: '支付失败',
        3: '已关闭',
        4: '已退款'
      }
      return statusMap[status] || '未知状态'
    },
    
    getStatusDesc(status) {
      const descMap = {
        0: '请尽快完成支付',
        1: '支付已完成',
        2: '支付未成功',
        3: '支付已关闭',
        4: '订单已退款'
      }
      return descMap[status] || ''
    },
    
    formatTime(time) {
      if (!time) return ''
      const date = new Date(time)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
    },
    
    retryPay() {
      if (!this.record) return
      
      uni.navigateTo({
        url: `/pages/order/pay?orderId=${this.record.orderId}`
      })
    },
    
    applyRefund() {
      if (!this.record) return
      
      uni.navigateTo({
        url: `/pages/pay/refund?orderId=${this.record.orderId}&paymentId=${this.record.paymentId}`
      })
    },
    
    goToOrder() {
      if (!this.record) return
      
      uni.navigateTo({
        url: `/pages/order/detail?orderId=${this.record.orderId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.record-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .loading, .error {
    text-align: center;
    padding: 200rpx 0;
    color: #999;
    font-size: 28rpx;
  }
  
  .detail-content {
    .status-section {
      background-color: #fff;
      padding: 60rpx 40rpx;
      text-align: center;
      margin-bottom: 20rpx;
      
      .status-icon {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        margin: 0 auto 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .iconfont {
          font-size: 60rpx;
          color: #fff;
        }
        
        &.pending {
          background-color: #fa8c16;
        }
        
        &.success {
          background-color: #52c41a;
        }
        
        &.failed {
          background-color: #ff4d4f;
        }
        
        &.closed {
          background-color: #999;
        }
        
        &.refunded {
          background-color: #1890ff;
        }
      }
      
      .status-text {
        display: block;
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 15rpx;
      }
      
      .status-desc {
        font-size: 28rpx;
        color: #666;
      }
    }
    
    .amount-section {
      background-color: #fff;
      padding: 40rpx;
      margin-bottom: 20rpx;
      
      .amount-label {
        display: block;
        font-size: 28rpx;
        color: #666;
        margin-bottom: 20rpx;
      }
      
      .amount-value {
        .currency {
          font-size: 32rpx;
          color: #ff4d4f;
        }
        
        .price {
          font-size: 48rpx;
          font-weight: bold;
          color: #ff4d4f;
        }
      }
    }
    
    .info-section {
      background-color: #fff;
      padding: 0 40rpx;
      margin-bottom: 20rpx;
      
      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .label {
          font-size: 28rpx;
          color: #666;
        }
        
        .value {
          font-size: 28rpx;
          color: #333;
          text-align: right;
          max-width: 400rpx;
          word-break: break-all;
          
          &.error {
            color: #ff4d4f;
          }
        }
      }
    }
    
    .action-section {
      padding: 40rpx;
      
      .btn {
        width: 100%;
        height: 88rpx;
        border-radius: 44rpx;
        font-size: 32rpx;
        margin-bottom: 20rpx;
        border: none;
        
        &.btn-primary {
          background-color: #007aff;
          color: #fff;
        }
        
        &.btn-secondary {
          background-color: #ff4d4f;
          color: #fff;
        }
        
        &.btn-default {
          background-color: #fff;
          color: #333;
          border: 1rpx solid #ddd;
        }
      }
    }
  }
}
</style> 